<!-- <script type="text/javascript" src="/public/library/jquery/jquery.js"></script>
 -->
<style>
.loading {
    background: url(/public/library/jquery/images/spinner.gif) no-repeat center center
}

</style>
<link rel="stylesheet" href="/public/library/hvn/hgallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="/public/library/hvn/jquery.hgallery.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript"> 
$(function(){
    $("#<?=$this->galleryId?>").hgallery({
			itemsPerPage : 3,
			animationSpeed : 'normal', /* fast/normal/slow */
            
			/*item = li*/
            itemWidth: <?=$this->itemWidth?>, /*not including border*/
            itemHeight: parseInt(<?=$this->itemWidth?> * 80 / 100), /*pixels*/
            itemMargin: 3, /*left-right Margin for li */
            itemTopMargin: 2, /* margin from li to ul */
            itemBorderWidth: 2,
            urWrapperBorderWidth:2, /* border around the itemsPerPage list */
            mainImageSize: '<?=$this->mainImageSize?>',
		});
});
</script>

<div id="<?=$this->galleryId?>">
    <div class="hgallery_main_image_div" style="text-align:center;">
           <img src='' class="hgallery_main_image" align="absmiddle"/>
    </div>
    <hr/>
	
    <div class="hgallery_item_navigation"> 
        <a href="javascript:void()" class="hgallery_item_prev"><img src="/public/themes/prime/images/left/homepage/gallery/prev_gallery19x19.png" border=0 /></a>
        <a href="javascript:void()" class="hgallery_item_play"><img src="/public/themes/prime/images/left/homepage/gallery/play_gallery19x19.png" border=0 /></a>
        <a href="javascript:void()" class="hgallery_item_next"><img src="/public/themes/prime/images/left/homepage/gallery/last_gallery19x19.png" border=0 /></a>
        <a class="hgallery_item_stop" style="display:none"><img src="/public/themes/prime/images/left/homepage/gallery/stop_gallery19x19.png" border=0 /></a>
            <span class="imageIndex"></span>/<span class="imageTotal"></span>
    </div>
    
    <div class="ul_wrapper" > <!-- image li list ul -->
        <ul class="hgallery_ul">
            <?foreach ($this->displayFiles as $f=>$ctime) :?>
            <?if (file_exists(APP_PATH . sprintf( $this->base, $this->thumbSize) . $f)) :?>
                <li><img src="<?=sprintf($this->base, $this->thumbSize) . $f?>"></li> 
            <?endif?>
            <?endforeach?>
        </ul>
    </div>
    
    <div>
        <ul class="hgalery_page_navigation_ul">
            <li class="prev"><a href="#"><?=t(3) ?></a>
            </li>
            <li>
                    <span class="pageIndex"></span>/<span class="pageTotal"></span>
            </li>
            <li class="next"><a href="#"><?=t(4) ?></a>
            </li>
        </ul>                
    </div>
    
</div>
